<template>
    <el-drawer v-model="visible" :title="title + '菜单'" :before-close="close" direction="rtl" size="650px">
        <el-form v-loading="loading" :model="formData" label-width="85px" label-position="right" status-icon label-suffix=":">
            <el-form-item label="上级菜单" prop="parentId">
                <!-- checkStrictly: true 父子不互相关联, emitPath: false 只返回该节点的值 -->
                 <el-cascader v-model="formData.parentId" :options="state.menuList" :props="{checkStrictly: true, emitPath: false, label: 'title', value: 'id'}"
                    clearable placeholder="请选择上级菜单" class="w100" />
            </el-form-item>
            <el-form-item label="菜单类型" prop="type" :rules="[{required: true, message: '请选择菜单类型', trigger: 'change'}]">
                <el-radio-group v-model="formData.type" size="small" border>
                    <el-radio-button value="1">菜单</el-radio-button>
                    <el-radio-button value="2">按钮</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单名称" prop="meta.title" :rules="[{required: true, message: '请输入菜单名称', trigger: 'blur'}]">
                <el-input v-model="formData.meta.title"></el-input>
            </el-form-item>
            <template v-if="formData.type === '2'">
                <el-form-item label="权限标识" prop="code" >
                    <el-input v-model="formData.code"></el-input>
                </el-form-item>
            </template>
            <template v-else >
                <el-form-item label="路由地址" prop="path" >
                    <el-input v-model="formData.path"></el-input>
                </el-form-item>
                <el-form-item label="路由名称" prop="name" >
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="组件路径" prop="component" >
                    <el-input v-model="formData.component"></el-input>
                </el-form-item>
                <el-form-item label="菜单图标" prop="meta.icon" >
                    <el-input v-model="formData.meta.icon"></el-input>
                </el-form-item>
                <el-form-item label="重定向" prop="redirect" >
                    <el-input v-model="formData.redirect"></el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="是否隐藏" prop="meta.hidden" :rules="[{required: true, message: '请选择是否隐藏', trigger: 'change'}]" >
                            <el-form-item>
                                <el-radio-group v-model="formData.meta.hidden" size="small" border>
                                    <el-radio-button value="true">隐藏</el-radio-button>
                                    <el-radio-button value="false">不隐藏</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否缓存" prop="meta.cache" :rules="[{required: true, message: '请选择是否缓存', trigger: 'change'}]" >
                            <el-form-item>
                                <el-radio-group v-model="formData.meta.cache" size="small" border>
                                    <el-radio-button value="true">缓存</el-radio-button>
                                   <el-radio-button value="false">不缓存</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                        </el-form-item>
                    </el-col>
                </el-row>
            </template>
            <el-form-item label="排序" prop="sort" >
                <el-input-number v-model="formData.sort" :min="1" :max="999"></el-input-number>
            </el-form-item>
            <el-form-item label="备注" prop="remark" >
                <el-input type="textarea" v-model="formData.remark"></el-input>
            </el-form-item>
        </el-form>
        <template #footer >
            <el-row justify="center" class="mt-10" >
                <el-button type="primary" @click="submitForm">保存</el-button>
                <el-button @click="close">取消</el-button>
            </el-row>
        </template>
    </el-drawer>
</template>

<script setup lang="ts" name="SystemMenuEdit">
import { reactive, ref, toRefs, watch } from 'vue'
import { getMenuSelect, add, update } from '@/api/system/menu'

const emit = defineEmits(['refresh'])
const formRef = ref()
// 初始数据
const initData = {type: '1', sort: 1, meta: {hidden: false, cache: true}}

const state = reactive({
    title: '新增',
    type: 'add' as FormType,
    visible: false,
    loading: false,
    menuList: [],
    formData: {} as SysMenuType,
})
const { title, type, visible, loading, menuList, formData } = { ...toRefs(state) }

// 导出父组件访问
defineExpose({
    open
})

async function loadMenuSelect() {
    const { code, data } = await getMenuSelect()
    if (code !== 20000) return
    state.menuList = data
}

// 打开窗口
function open(type: FormType, title: string, data = {} as any) {
    state.title = title
    state.type = type
    state.formData = JSON.parse(JSON.stringify({...initData, ...data}))
    state.visible = true

    loadMenuSelect()
}
// 关闭窗口
function close() {
    if (state.loading) return
    // 重置表单
    formRef.value?.resetFields()
    state.visible = false
}
// 提交表单
function submitForm() {
    formRef.value?.validate(async (valid:any) => {
        if (!valid) return
        // 校验通过，如果是按钮（"2"）把对应不需要的属性值清空
        if (state.formData.type === '2') {
            state.formData.path = ''
            state.formData.name = ''
            state.formData.component = ''
            state.formData.redirect = ''
            state.formData.meta.icon = ''
            state.formData.meta.hidden = false
            state.formData.meta.cache = false
        }
        submitData()
   })
}

async function submitData() {
    try {
        state.loading = true
        let res 
        if (state.type === 'edit') {
            // 编辑
            res = await update(state.formData)
        } else {
            // 新增
            res = await add(state.formData)
        }
        if (res.code !== 20000) return
        close()
        emit('refresh')
    } catch (error) {
    } finally {
        state.loading = false
    }
}
</script>

<style scoped>

</style>